//Vue 组件,组件名不能用驼峰命名法
//该组件提供登录相关的基本界面元素，常用的操作
Vue.component("login", {
    template: `
    <span>
        <slot v-if="!myinfo" name="nologin" v-bind:v="visible">
            <a href="javascript:void(0)" @click.prvent="visible.loginVisible=true" >登录</a>
            <a href="javascript:void(0)" @click.prvent="visible.regVisible=true">注册</a>
            <a href="javascript:void(0)" @click.prvent="visible.forgetVisible=true">忘记密码</a>
        </slot>
        <slot v-else name="logined" v-bind:m="myinfo">
            <!--//Todo  id是临时用于测试的字段-->
            欢迎{{myinfo.id}}
            <a href="/logout">退出</a>
        </slot>
        <el-dialog title="登录窗口" :visible.sync="visible.loginVisible">
          <el-form>
            <el-form-item label="用户名" label-width="80px">
              <el-input v-model="login.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px">
              <el-input v-model="login.pwd" autocomplete="off" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible.loginVisible = false">取 消</el-button>
            <el-button type="primary" @click="doLogin">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="注册窗口" :visible.sync="visible.regVisible">
          <el-form>
            <el-form-item label="用户名" label-width="80px">
              <el-input v-model="reg.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="80px">
              <el-input v-model="reg.pwd1" autocomplete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" label-width="80px">
              <el-input v-model="reg.pwd2" autocomplete="off" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="visible.loginVisible = false">取 消</el-button>
            <el-button type="primary" @click="doReg">注册</el-button>
          </div>
        </el-dialog>
        <el-dialog title="忘记密码窗口" :visible.sync="visible.forgetVisible" >
          <el-form>
            <el-form-item label="用户名" label-width="80px">
              <el-input v-model="forget.name" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="验证码" label-width="80px">
              <el-input v-model="forget.vcode" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="新的密码" label-width="100px">
              <el-input v-model="forget.pwd" autocomplete="off" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="display: flex">
            <el-button @click="visible.loginVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendMail">发送简单验证码</el-button>
            <el-button type="primary" @click="sendHtmlMail">发送html验证码</el-button>
            <el-button type="primary" @click="resetForgetPwd">修改密码</el-button>
          </div>
        </el-dialog>
    </span>`
    ,
    //组件内数据模型  必需是函数
    data() {
        return {
            myinfo: null,
            visible:{loginVisible:false,
                     regVisible:false,
                     resetVisible:false,
                     forgetVisible:false
            },
            login:{name:"",pwd:""},
            forget:{name:"",pwd:"",vcode:""},
            reg:{name:"",pwd1:"",pwd2:"",vcode:""}
        }
    },
    methods:{
        doLogin(){
            let p = new URLSearchParams();
            p.append("name",this.login.name);
            p.append("pwd",this.login.pwd);
            axios.post("/login",p).then( res => {
                if (res.data.code == 1){
                    this.myinfo = res.data.data;
                    this.visible.loginVisible = false;

                    localStorage.setItem("isLogin","true");

                }else{
                    this.$alert(res.data.msg);
                }
            })
        },
        doReg(){
            let p = new URLSearchParams();
            p.append("name",this.reg.name);
            p.append("pwd1",this.reg.pwd1);
            p.append("pwd2",this.reg.pwd2);
            p.append("vocode",this.reg.vcode);
            axios.post("/reg",p).then( res => {
                if (res.data.code == 1){
                    this.$alert("注册成功，请登录");
                    this.visible.regVisible = false;
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },
        sendMail(){
            axios.get("/sendForgetMail?name=" + this.forget.name).then( res => {
                if (res.data.code == 1){
                    this.$message("验证码发送成功！");
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },
        sendHtmlMail(){
            axios.get("/sendForgetMail?name=" + this.forget.name + "&type=0").then( res => {
                if (res.data.code == 1){
                    this.$message("验证码发送成功！");
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },
        resetForgetPwd(){
            let p = new URLSearchParams();
            p.append("name",this.forget.name);
            p.append("newPwd",this.forget.pwd);
            p.append("vcode",this.forget.vcode);
            axios.post("/resetForgetPwd",p).then( res => {
                if (res.data.code == 1){
                    this.$message("密码修改成功，请登录");
                    this.visible.forgetVisible = false;
                }else{
                    this.$alert(res.data.msg);
                }
            })
        }
    },
    created() {
        axios.get("/myinfo").then(res => {
            if (res.data.code == 1) {
                this.myinfo = res.data.data
            } else {
                // alert(11111);
                this.myinfo = null
            }
        });

        if (location.search == '?toLogin'){
            setTimeout(() =>{this.$alert('请先登录系统！')},100);
        }
    }
})
